<template>
  <div class="y-h-full y-w-full y-flex y-flex-col">
    <yyTable ref="tableRef" class="y-h-0 !y-flex-1" :tableColumn="tableColumn" v-bind="tableBingConfig" :rowKey="rowKey" :tableData="tableData" :checkList.sync="checkList">
      <template #before-table>
        <el-table-column type="index" v-if="tableHasIndex" align="center" label="序号" width="50"></el-table-column>
        <el-table-column type="selection" :reserve-selection="tableBingConfig.reserveSelection" v-if="tableHasSelection" align="center" width="50"></el-table-column>
      </template>
      <template #after-table>
        <el-table-column v-if="tableManagerColumn?.length" align="center" label="操作" :min-width="comManagerMinWidth">
          <template slot-scope="{ row }">
            <template v-for="item in tableManagerColumn">
              <el-button  :key="item.prop" v-bind="item" v-if="!item.hidden || !item.hidden(item, row)" @click="item.onClick && item.onClick(item, row)">{{ item.label }}</el-button>
            </template>
          </template>
        </el-table-column>
      </template>
      <template #[slotName]="{row}" v-for="slotName of Object.keys($scopedSlots)">
        <slot :name="slotName" :row="row"></slot>
      </template>
      <template #belongCategoryListSlot="{row}">
        <slot name="belongCategoryListSlot" :row="row"></slot>
      </template>
    </yyTable>
    <yyPagination v-if="tableHasPagination" class="y-flex-none y-mt-4" @pageChange="getTableData" v-model="pageConfig.currPage" :total="pageConfig.total" :pageSize.sync="pageConfig.pageSize">
    </yyPagination>
  </div>
</template>
  
  <script>
import yyTable from "@/components/yyTable/index.vue";
import yyPagination from "@/components/yyPagination/index.vue";
import { createLoading } from "@/utils/index.js";
export default {
  props: {
    params: {
      type: Object,
      default: () => ({}),
    },
    tableBingConfig: {
      type: Object,
      default: () => ({}),
    },
    tableApi: {
      type: Function,
      default: null,
    },
    tableManagerColumn: {
      type: Array,
      default: () => [],
    },
    tableColumn: {
      type: Array,
      default: () => [],
    },
    tableHasIndex: {
      type: Boolean,
      default: true,
    },
    tableHasSelection: {
      type: Boolean,
      default: true,
    },
    tableHasPagination: {
      type: Boolean,
      default: true,
    },
    rowKey: {
      type: [String, Function],
      default: "id",
    },
    tableAutoInit: {
      type: Boolean,
      default: true,
    },
  },
  components: { yyPagination, yyTable },
  name: "yyTablePagination",
  data() {
    return {
      checkList: [],
      tableData: [],
      pageConfig: {
        currPage: 1,
        pageSize: 15,
        total: 0,
      },
    };
  },
  computed: {
    comManagerMinWidth() {
      return (
        this.tableManagerColumn.reduce((pre, cur) => {
          return pre + (cur.width || 62);
        }, 0) +
        (this.tableManagerColumn.length - 1) * 20 +
        "px"
      );
    },
  },
  methods: {
    restoreSelections() {
      this.$refs.tableRef.restoreSelections();
    },
    getCheckMap() {
      return this.$refs.tableRef.crossPageMap;
    },
    /**
     * 设置默认跨页选中
     * @param rowKeyObjArr
     */
    setDefaultCorssPageMap(rowKeyObjArr) {
      this.$refs.tableRef.setDefaultCorssPageMap(rowKeyObjArr);
    },
    clearSelection() {
      this.$refs.tableRef.clearSelection();
    },
    refresh() {
      this.pageConfig.currPage = 1;
      this.getTableData();
    },
    async getTableData() {
      if (!this.tableApi) {
        return new Error("请传入tableApi");
      }
      const loading = createLoading("加载中，请稍等");
      let newParams = this.params;
      if (this.tableHasPagination) {
        newParams = Object.assign({}, newParams, this.pageConfig);
      }
      if (this.$attrs.tableDefaultParams) {
        newParams = Object.assign(
          {},
          newParams,
          this.$attrs.tableDefaultParams
        );
      }
      try {
        const res = await this.tableApi(newParams);
        if (!res) return;
        if (this.tableHasPagination) {
          this.tableData = res.list;
          this.pageConfig.total = res.totalCount;
        } else {
          this.tableData = res;
        }
        this.$nextTick(() => {
          if (this.tableBingConfig.reserveSelection) {
            this.restoreSelections();
          } else {
            this.clearSelection();
          }
        });
        this.$emit("getTableData", res);
      } catch (err) {
        console.log("获取接口错误了", err);
      } finally {
        loading.close();
      }
    },
  },
  mounted() {
    if (this.tableAutoInit) {
      this.getTableData();
    }
  },
};
</script>
  
  <style></style>